<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/admin.css" media="all">
    <link rel="stylesheet" href="../../css/custom.css" media="all">
    <script src="../../js/echarts.min.5.2.js"></script>
    <title>Document</title>
</head>

<body>
    <div class="layui-row">
        <div class="layui-col-lg6 layui-col-md8 layui-col-sm9 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="my-header">垂直布局</div>
                    <div>
                        <p>标题有主标题和副标题</p>
                        <p>主标题和副标题的属性设置一样</p>
                        <p>标题能设置多个</p>
                        <a target="_blank" style="color: rebeccapurple;"
                            href="https://echarts.apache.org/zh/option.html#title.itemGap">更多设置详情：点击下面的主标题</a>
                        <!-- <p style="color: #b6b6b6;">
                            属性：text、target、textAlign
                        </p> -->
                    </div>
                </div>
                <div class="layui-card-body">
                    <div id="myEchartsDiv" style="width: 100%; height: 200px;"></div>
                </div>
            </div>
        </div>
    </div>

    <script src="./mapData.js"></script>

    <script>
        var chartDom = document.getElementById('myEchartsDiv');
        var myChart = echarts.init(chartDom);

        let markData = [
            { "name": "Austin", "coord": [-97.44, 30.17], "SEIndex": "0.62" },
            { "name": "Dublin", "coord": [-6.26, 53.35], "SEIndex": "0.85" },
            { "name": "Kuala Lumpur", "coord": [101.42, 3.08], "SEIndex": "0.40" },
            { "name": "Lisbon", "coord": [-9.08, 38.43], "SEIndex": "0.99" },
            { "name": "Manila", "coord": [121, 14.37], "SEIndex": "0.80" },
            { "name": "Mountain View", "coord": [-122.552, 40], "SEIndex": "0.88" },
            { "name": "Mumbai", "coord": [72.49, 18.56], "SEIndex": "0.80" },
            { "name": "Warsaw", "coord": [21, 52.15], "SEIndex": "0.61" }]

        option = {
            toolbox: {
                right: 5,
                bottom: 2,
                show: true,
                feature: {
                    myTool1: {
                        show: true,
                        title: "Enlarge",
                        icon: "path://M641.750109 384.100028l205.227128-204.519-0.704035 115.89966c-0.282433 9.611915 7.489578 18.09103 17.101493 17.808598l12.297071 0c9.611915-0.283456 17.667382-5.936199 17.808598-15.689331l0.565888-172.57752c0-0.14224 0.282433-9.187243 0.282433-9.187243 0.14224-4.804423-0.99056-9.187243-4.100388-12.297071-3.109828-3.109828-7.347339-5.086855-12.297071-4.946662l-8.763594 0.14224c-0.141216 0-0.278339 0-0.420579 0.14224L697.581696 98.166787c-9.611915 0.283456-17.667382 8.200776-17.808598 17.950837l0 12.297071c1.416256 11.44875 10.458189 18.092054 20.070104 17.808598l112.789832 0.283456-204.66124 203.814965c-9.329483 9.329483-9.329483 24.449855 0 33.778314 9.329483 9.470699 24.452925 9.470699 33.782408 0L641.750109 384.100028zM383.095141 576.889893 177.726797 780.705881l0.707105-115.338888c0.283456-9.607822-7.492648-18.086937-17.104563-17.808598l-13.001105 0c-9.611915 0.283456-17.667382 5.937223-17.808598 15.690354l-0.565888 172.718737c0 0.14224-0.282433 9.187243-0.282433 9.187243-0.14224 4.808516 0.99056 9.187243 4.096295 12.297071 3.109828 3.109828 7.351432 5.086855 12.297071 4.946662l8.762571-0.14224c0.14224 0 0.283456 0 0.425695-0.14224l171.873486 0.708128c9.607822-0.283456 17.667382-8.196683 17.808598-17.950837L344.93503 832.575226c-1.415232-11.44875-10.461259-18.092054-20.074198-17.808598L212.069977 814.483172 416.59 610.671277c9.329483-9.329483 9.329483-24.453948 0-33.782408C407.40685 567.41817 392.424624 567.41817 383.095141 576.889893L383.095141 576.889893zM894.047276 835.967486l-0.424672-172.718737c-0.283456-9.612938-8.200776-15.406898-17.809621-15.690354l-12.296047 0c-9.612938-0.278339-17.243733 8.200776-17.105586 17.808598l0.708128 115.903753L641.750109 576.889893c-9.329483-9.329483-24.452925-9.329483-33.782408 0-9.325389 9.328459-9.325389 24.452925 0 33.782408L812.490795 814.483172l-112.789832 0.283456c-9.611915-0.283456-18.515702 6.502088-20.073174 17.808598l0 12.297071c0.282433 9.611915 8.200776 17.667382 17.808598 17.950837l171.166381-0.708128c0.141216 0 0.282433 0.14224 0.424672 0.14224l8.763594 0.14224c4.803399 0.141216 9.187243-1.694595 12.296047-4.946662 3.109828-3.109828 4.238534-7.488555 4.097318-12.297071 0 0-0.14224-9.046027-0.14224-9.187243L894.047276 835.968509zM212.216309 146.506748l112.789832-0.283456c9.607822 0.283456 18.512632-6.502088 20.070104-17.808598L345.076246 116.116601c-0.283456-9.611915-8.196683-17.667382-17.808598-17.950837l-172.011632 0.708128c-0.14224 0-0.283456-0.14224-0.425695-0.14224l-8.761548-0.14224c-4.808516-0.141216-9.187243 1.694595-12.297071 4.946662-3.109828 3.109828-4.242627 7.488555-4.096295 12.297071 0 0 0.282433 9.046027 0.282433 9.187243l0.420579 172.718737c0.14224 9.608845 8.200776 15.406898 17.808598 15.686261l13.005198 0c9.611915 0.282433 17.242709-8.196683 17.10047-17.808598l-0.564865-115.334795 205.231221 203.958228c9.324366 9.329483 24.448832 9.329483 33.777291 0 9.329483-9.329483 9.329483-24.452925 0-33.782408L212.216309 146.506748 212.216309 146.506748zM212.216309 146.506748",
                        onclick: function (e) {
                            self.dialogTitle = "Stress Exposure Distribution Map";
                            self.dialogTooltip =
                                "Map that displays the average overall index value for each geographical location.";
                            self.geoRemarkVisible = true;
                            let opts = e.getOption();
                            opts.toolbox[0].show = false;
                            opts.series[0].markPoint.label.rich.SEIndex.fontSize = 16
                            opts.series[0].markPoint.label.rich.name.fontSize = 17
                            opts.series[0].markPoint.label.rich.SEIndex.lineHeight = 18
                            opts.series[0].markPoint.label.rich.name.lineHeight = 15
                            setTimeout(() => {
                                let fullScreen = echarts.init(
                                    document.getElementById("fullScreen")
                                );
                                fullScreen.setOption(opts, true);
                                fullScreen.resize();
                                window.addEventListener("resize", function () {
                                    fullScreen.resize();
                                });
                            }, 10);
                            self.isFull = !self.isFull;
                        },
                    },
                },
            },
            series: [
                {
                    type: "map", // 类型
                    name: "世界地图",
                    mapType: "world",
                    roam: false,
                    zoom: 1.3,
                    selectedMode: false,
                    itemStyle: {
                        normal: {
                            areaColor: "#cdd7e2",
                            borderColor: "#fff",
                        },
                        emphasis: {
                            color: "#333",
                            areaColor: "#cdd7e2",
                            borderColor: "#fff",
                        },
                    },
                    markPoint: {
                        symbol:
                            "image://",
                        symbolSize: function (val, params) {
                            if (parseFloat(params.data.SEIndex) < 0.5) {
                                return 0;
                            } else {
                                return 17;
                            }
                        },
                        label: {
                            normal: {
                                //position: 'right',
                                position: ["95%", "18%"],
                                show: true,
                                formatter: function (params) {
                                    var arr = [
                                        "{name|" + params.data.name + "}",
                                        "{SEIndex|" + params.data.SEIndex + "}",
                                    ];
                                    return arr.join("\n");
                                },
                                rich: {
                                    name: {
                                        color: "#000",
                                        lineHeight: 15,
                                        fontWeight: "bold",
                                        fontSize: 14,
                                        fontFamily: "Graphik, Arial, sans-serif",
                                    },
                                    SEIndex: {
                                        color: "#4472c4",
                                        fontWeight: "bold",
                                        lineHeight: 10,
                                        fontSize: 13,
                                        fontFamily: "Graphik, Arial, sans-serif",
                                    },
                                },
                            },
                            emphasis: {
                                show: true,
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: "rgba(72,150,128,1)",
                            },
                        },
                        data: markData,
                    },
                },
            ],
        }


        option && typeof option === "object" && myChart.setOption(option);
    </script>

    <script src="../../js/tool.js"></script>
    <script>
        init()
    </script>
</body>

</html>